<template>
    <view class="content" :style="{ '--color': color, '--bottom': isflag ? '100rpx' : '0rpx' }">
        <status-bar ref="statusbar" :title="title" :back="isflag ? 0 : 1" :search="isflag ? 1 : 0"></status-bar>
        <!-- 购物车列表 -->
        <view class="list-box" v-if="cartList && cartList.length > 0">
            <view class="cartList flex-box align-center f-nowrap" v-for="(item, index) in cartList" :key="index">
                <view class="selectInput">
                    <view class="selectList" :class="!item.checked ? 'bor' : 'thmeBg'" :style="{ '--color': color }" @click="checkeds(index)">
                        <text class="iconfont icon-xuanzhong"></text>
                    </view>
                </view>
                <view class="spImages f-shrink-0" @click="toGoods(item.goods_id)">
                    <image :src="$imgUrls(item.goodsImg)" mode="aspectFill"></image>
                </view>
                <view class="spxiangqing flex flex-box">
                    <view>
                        <view class="flex-box flex-between">
                            <text class="describe lines2" @click="toGoods(item.goods_id)">{{ item.goods_name }}</text>
                            <view>
                                <text class="icon-del" @click="remove(index, item.car_id)">删除</text>
                            </view>
                        </view>
                        <!-- 规格 -->
                        <view class="specs-show" v-if="item.operation_text">
                            <text class="d-inline-block">规格：{{ item.operation_text }}</text>
                        </view>
                    </view>

                    <view class="operation flex-box flex-between">
                        <text class="myPrice">{{ item.price }}</text>
                        <view>
                            <view class="btns" :class="{ notClick: subLimit(item) }" @click="increase(item, index, item.car_id, item.num, item.storeNum, 1)">-</view>
                            <text class="gmNub">{{ item.num }}</text>

                            <view class="btns" :class="{ notClick: addLimit(item) }" @click="increase(item, index, item.car_id, item.num, item.storeNum, 2)">+</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <empty v-if="nothing" pad="30" type="1" cat="4" :msg="title + '空空的，本喵不开心~'"></empty>
        <!-- 猜你喜欢 -->
        <view style="padding: 24rpx" v-if="goodsList && goodsList.length > 0">
            <view class="flex-box flex-center align-center youTitle">
                <text class="toLeft"></text>
                <text class="toLeft"></text>
                <view>猜你喜欢</view>
                <text class="toRight"></text>
                <text class="toRight"></text>
            </view>
            <view class="my-box">
                <view class="left-box">
                    <view class="repeatGoodsList">
                        <view v-for="(item, index) in goodsLeftList" :key="index" @click="toGoods(item.goods_id)" class="my-goods-box" :class="'goods-' + item.goods_id">
                            <image
                                :src="item.img ? $imgUrls(item.img) : ''"
                                mode="widthFix"
                                class="goodImg"
                                :data-name="item.name"
                                :data-id="item.goods_id"
                                :data-type="item.type"
                                @error="onImageLoad"
                                @load="onImageLoad"
                            ></image>
                            <view class="goods-box-msg">
                                <view class="thmeTxt lines2 hisGoodsName2">
                                    <text v-if="item.type == 1" class="speTag">特价</text>
                                    <text v-if="item.type == 2" class="speTag">团购</text>
                                    {{ item.name }}
                                </view>
                                <!-- <view class="saled" v-if='hot == 1'>
									<text>已售{{item.sales_number}}</text>
									<text>热度{{item.show_number}}</text>
								</view> -->
                                <view class="profitTitle_ lines" v-if="item.profitTitle">
                                    <text>{{ item.profitTitle }}</text>
                                </view>
                                <view class="prices flex-box flex-between">
                                    <view class="priceNow">
                                        <text class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
                                        <template v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
                                            <text class="priceReg myPrice">{{ item.full_price }}</text>
                                        </template>
                                        <template v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
                                            <text class="priceReg myPrice">{{ item.full_price }}</text>
                                        </template>
                                    </view>
                                    <!-- <view class="position flex-box align-center" v-if='position == 1 && positionshow == 1 && item.distance'>
										<text class="iconfont icon-dingwei"></text>
										<text class="txt">{{parseFloat(item.distance)>999?(parseFloat(item.distance)/1000).toFixed(2)+'km':parseFloat(item.distance).toFixed(2)+'m'}}</text>
									</view> -->
                                </view>
                            </view>
                            <view class="maskObtained" v-if="item.state == 0">
                                <image :src="staticUrl + '/images/Obtained.png'" class="icon-obtained"></image>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="right-box">
                    <view class="repeatGoodsList">
                        <view v-for="(item, index) in goodsRightList" :key="index" @click="toGoods(item.goods_id)" class="my-goods-box" :class="'goods-' + item.goods_id">
                            <image
                                :src="item.img ? $imgUrls(item.img) : ''"
                                mode="widthFix"
                                class="goodImg"
                                :data-name="item.name"
                                :data-id="item.goods_id"
                                :data-type="item.type"
                                @error="onImageLoad"
                                @load="onImageLoad"
                            ></image>
                            <view class="goods-box-msg">
                                <view class="thmeTxt lines2 hisGoodsName2">
                                    <text v-if="item.type == 1" class="speTag">特价</text>
                                    <text v-if="item.type == 2" class="speTag">团购</text>
                                    {{ item.name }}
                                </view>
                                <!-- <view class="saled" v-if='hot == 1'>
									<text>已售{{item.sales_number}}</text>
									<text>热度{{item.show_number}}</text>
								</view> -->
                                <view class="profitTitle_ lines" v-if="item.profitTitle">
                                    <text>{{ item.profitTitle }}</text>
                                </view>
                                <view class="prices flex-box flex-between">
                                    <view>
                                        <view class="priceNow">
                                            <text class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
                                            <template v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
                                                <text class="priceReg myPrice">{{ item.full_price }}</text>
                                            </template>
                                            <template v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
                                                <text class="priceReg myPrice">{{ item.full_price }}</text>
                                            </template>
                                        </view>
                                    </view>
                                    <!-- <view class="position flex-box align-center" v-if='position == 1 && positionshow == 1 && item.distance'>
										<text class="iconfont icon-dingwei"></text>
										<text class="txt">{{parseFloat(item.distance)>999?(parseFloat(item.distance)/1000).toFixed(2)+'km':parseFloat(item.distance).toFixed(2)+'m'}}</text>
									</view> -->
                                </view>
                            </view>
                            <view class="maskObtained" v-if="item.state == 0">
                                <image :src="staticUrl + '/images/Obtained.png'" class="icon-obtained"></image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 底部操作 -->
        <view class="bottom-box" v-if="cartList.length > 0">
            <view class="bottomf flex-box flex-between">
                <view class="leftPic flex-box align-center">
                    <view @click="allCheckeds" class="flex-box align-center">
                        <view class="selectList" :class="!allChecked ? 'bor' : 'thmeBg'" :style="{ '--color': color }">
                            <text class="iconfont icon-xuanzhong"></text>
                        </view>
                        <text class="qselect">全选</text>
                    </view>
                    <text class="total">
                        合计：
                        <text class="cost">{{ parseFloat(total).toFixed(2) }}</text>
                    </text>
                </view>
                <view class="rightBtn thmeBg" @click="edtorOrder">去结算</view>
            </view>
        </view>

        <showModel
            v-if="showModal"
            @cancelFunc="closeModel"
            type="99"
            @certain="delCart"
            :title="'是否确定删除该' + nameDefinition.goodsName + '？'"
            msg="删除后将不可恢复"
            btn1="取消"
            btn2="我很确定"
        ></showModel>
        <tabBar v-if="isflag" :tab="7"></tabBar>
    </view>
</template>
<script>
    import { mapState } from 'vuex';
    var that;
    export default {
        data() {
            return {
                showModal: false,
                carIndex: -1,
                carId: '',
                imgUrl: this.imgUrl,
                total: 0,
                cartList: [], // 商品列表
                allChecked: false,
                commodity: [],
                adIds: [], // 选中的商品ID
                nothing: false, // 购物车为空

                staticUrl: this.staticUrl,

                goodsList: [],
                goodsListCount: 0, //加载第i张图片
                goodsLeftList: [], // 左侧商品列表
                goodsLeftListHeight: 0,
                goodsRightList: [], // 右侧商品列表
                goodsRightListHeight: 0,
                shop_id: ''
            };
        },
        onLoad(e) {
            if (e.shop_id) this.shop_id = e.shop_id;
        },
        onShow() {
            this.getCart();
        },
        methods: {
            getCart() {
                // 7、获取购物车数据
                let that = this;
                that.allChecked = false;
                that.total = 0;
                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/cartList',
                        data: {
                            shop_id: this.shop_id
                        }
                    })
                    .then((res) => {
                        if (res.errcode == 100 && res.data) {
                            that.nothing = false;
                            that.cartList = res.data;
                            that.goodsList = [];
                        } else {
                            that.cartList = [];
                            that.nothing = true;
                            that.getUlike();
                        }
                    });
            },
            getUlike() {
                // 猜你喜欢
                let that = this;
                that.$http
                    .post({
                        url: '/singleSaleApi/guessLikeGoods'
                    })
                    .then((res) => {
                        if (res.data) {
                            if (that.goodsList.length < 1) {
                                that.goodsList = res.data;
                                that.goodsLeftList.push(res.data[0]);
                            }
                        } else {
                            that.goodsList = [];
                        }
                    });
            },
            onImageLoad: function (e) {
                let that = this;
                let rImgH = 0;
                var goodsId = 'goods-' + e.target.dataset.id;
                uni.createSelectorQuery()
                    .in(this)
                    .select('.' + goodsId)
                    .boundingClientRect(function (data) {
                        rImgH += data.height;
                        if (that.goodsListCount == 0) {
                            that.goodsLeftListHeight += rImgH; //第一张图片高度加到goodsLeftListHeight
                            that.goodsListCount++;
                            that.goodsRightList.push(that.goodsList[that.goodsListCount]); //添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中
                        } else {
                            that.goodsListCount++;
                            if (that.goodsLeftListHeight > that.goodsRightListHeight) {
                                //把图片的高度加到目前高度更低的栏中
                                that.goodsRightListHeight += rImgH;
                            } else {
                                that.goodsLeftListHeight += rImgH;
                            }
                            if (that.goodsListCount < that.goodsList.length) {
                                //根据目前的栏高，把下一张图片，push到低的那栏
                                if (that.goodsLeftListHeight > that.goodsRightListHeight) {
                                    that.goodsRightList.push(that.goodsList[that.goodsListCount]);
                                } else {
                                    that.goodsLeftList.push(that.goodsList[that.goodsListCount]);
                                }
                            }
                        }
                    })
                    .exec();
            },
            closeModel() {
                let that = this;
                that.showModal = false;
                that.getCart();
            },
            // 手动修改购物车商品数量
            changeNumber(index, number) {
                let that = this;
                that.cartList[index].num = number;
            },

            edtorOrder() {
                let that = this;
                var buyState = uni.getStorageSync('buyState');
                // if (buyState == 0) return this.$Toast('您已无购买权限！')
                // 去结算
                try {
                    uni.removeStorageSync('car_id');
                } catch (e) {
                    // error
                }
                if (that.adIds.length > 0) {
                    var adIds = that.adIds.join(',');
                    uni.setStorage({
                        key: 'buyway',
                        data: ''
                    });
                    uni.navigateTo({
                        url: '/orderPage/order/createOrders?car_id=' + adIds
                    });
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: '请选择' + that.nameDefinition.goodsName + '!'
                    });
                }
            },
            reduce(i, carId) {
                let that = this;
                if (parseInt(that.cartList[i].num) > 1) {
                    that.$http
                        .post({
                            // 10.购物车减去数量
                            url: '/zzj_singleSaleApi/decCart',
                            data: {
                                car_id: carId,
                                num: that.cartList[i].num
                            }
                        })
                        .then((res) => {
                            if (res.code == 100) {
                                let n = parseInt(that.cartList[i].num);
                                that.cartList[i].num = n--;
                                that.totalPrice();
                            } else {
                                uni.showToast({
                                    title: res.msg,
                                    duration: 1500
                                });
                            }
                        });
                } else {
                    uni.showToast({
                        title: '数量不能少于1哦'
                    });
                }
            },

            increase(item, i, carId, number, storeNum, type) {
                let that = this;

                const buy_config = item.buy_config.buy_config;
                // type:  1减  2加  3修改
                var num = parseInt(number);
                var storeNum = parseInt(storeNum);
                if (type == 1) {
                    if (num == buy_config.min_num) return this.$Toast(`数量不能少于${buy_config.min_num}`);
                    if (num > buy_config.min_num) num -= buy_config.step_num;
                }

                if (type == 2) {
                    if (num >= storeNum) return this.$Toast(`库存不足了哦`);
                    if (buy_config.max_num > 0 && num == buy_config.max_num) return this.$Toast(`数量不能超过${buy_config.max_num}`);
                    num = num + Number(buy_config.step_num);
                }

                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/incCart',
                        data: {
                            car_id: carId,
                            num: num
                        }
                    })
                    .then((res) => {
                        if (res.errcode == 100) {
                            that.cartList[i].num = num;
                            that.totalPrice();
                        } else {
                            uni.showToast({
                                title: res.msg,
                                duration: 1500,
                                icon: 'none'
                            });
                        }
                    });
            },
            delCart() {
                let that = this;
                that.$http
                    .post({
                        // 8、删除购物车
                        url: '/zzj_singleSaleApi/delCart',
                        data: {
                            car_id: that.carId
                        }
                    })
                    .then((res) => {
                        if (res.errcode == 100) {
                            that.$delete(that.cartList, that.carIndex);
                            that.totalPrice();
                            if (that.cartList.length < 1) {
                                that.nothing = true;
                                that.allChecked = false;
                                that.$emit('isEmpty', 1);
                            }
                        } else {
                            uni.showToast({
                                title: res.msg,
                                duration: 1500
                            });
                        }
                        that.showModal = false;
                    });
            },
            remove(i, carId) {
                let that = this;
                that.carId = carId;
                that.carIndex = i;
                that.showModal = true;
            },
            checkeds(i) {
                let that = this;
                // 单选
                that.cartList[i].checked = !that.cartList[i].checked;
                that.totalPrice();
                var j = 0,
                    len = that.cartList.length;
                that.adIds = [];
                for (let l = 0; l < len; l++) {
                    if (that.cartList[l].checked === true) {
                        j++;
                        that.adIds.splice(0, -1, that.cartList[l].car_id);
                    }
                    if (l == len - 1) {
                        if (j < len) {
                            // 并未全选
                            that.allChecked = false;
                        } else {
                            // 全选
                            that.allChecked = true;
                        }
                    }
                }
                that.cartList = [].concat(that.cartList);
            },
            allCheckeds() {
                let that = this;
                // 全选
                if (that.cartList.length == 0) {
                    uni.showToast({
                        icon: 'none',
                        title: '请先添加' + that.goodsName + '哦'
                    });
                    return;
                }
                that.adIds = [];
                if (that.allChecked) {
                    for (let i in that.cartList) {
                        that.cartList[i].checked = false;
                    }
                } else {
                    for (let i in that.cartList) {
                        that.cartList[i].checked = true;
                        that.adIds.splice(0, -1, that.cartList[i].car_id);
                    }
                }
                that.allChecked = !that.allChecked;
                that.totalPrice();
            },
            totalPrice() {
                let that = this;
                // 计算总价
                let totals = 0;
                for (let i in that.cartList) {
                    if (that.cartList[i].checked) {
                        totals += parseFloat(that.cartList[i].price) * parseInt(that.cartList[i].num);
                    }
                }
                that.total = totals.toFixed(2);
            },
            subLimit(item) {
                const buy_config = item.buy_config.buy_config;
                return item.num == buy_config.min_num ? true : false;
            },
            addLimit(item) {
                const buy_config = item.buy_config.buy_config;
                if (buy_config.max_num && buy_config.max_num > 0 && item.num == buy_config.max_num) return true;
                if (!buy_config.max_num || (buy_config.max_num <= 0 && item.num == item.storeNum)) return true;
            }
        },
        computed: {
            ...mapState(['nameDefinition', 'tabTitle', 'vid', 'share', 'color', 'tabBar']),

            isflag() {
                const tabs = this.tabBar.list;
                return tabs.some((n) => n.id == 7) && !this.shop_id;
            },
            title() {
                return this.tabTitle && !this.shop_id ? this.tabTitle : '购物车';
            }
        },
        onShareAppMessage(res) {
            let share = this.share;
            return {
                title: share.title,
                desc: share.desc,
                path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
                imageUrl: `${share.imageUrl}`
            };
        },
        onPullDownRefresh() {
            let that = this;
            that.cartList = [];
            that.getCart();
            setTimeout(function () {
                uni.stopPullDownRefresh();
            }, 1000);
        }
    };
</script>

<style scoped lang="scss">
    .selectList {
        width: 36rpx;
        height: 36rpx;
        border-radius: 100%;
        margin-right: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content {
        box-sizing: border-box;

        .list-box {
            padding-bottom: 20rpx;

            .cartList {
                margin: 20upx;
                padding: 20rpx 20rpx 20rpx 10rpx;
                background: #ffffff;
                overflow: hidden;
                margin-bottom: 8upx;
                box-shadow: 0 0 8rpx 1px rgba(0, 0, 0, 0.08);
                border-radius: 16upx;
                height: 240upx;

                .selectInput {
                    padding: 30rpx 10rpx;
                }

                .spImages {
                    width: 200upx;
                    height: 200upx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .spxiangqing {
                    position: relative;
                    flex-direction: column;
                    justify-content: space-between;
                    padding-left: 10rpx;
                    height: 100%;

                    .describe {
                        font-size: 26rpx;
                        line-height: 40rpx;
                        flex: 1;
                        text-align: justify;
                        margin-right: 10upx;
                    }

                    .icon-del {
                        color: red;
                        padding-left: 10rpx;
                    }

                    .specs-show {
                        // height: 40upx;
                        display: flex;
                        align-items: center;
                        overflow: hidden;
                        margin-top: 10rpx;

                        text {
                            font-size: 22rpx;
                            color: #999;
                            background-color: #eeeeee;
                            border-radius: 4upx;
                            padding: 4upx 8upx;
                            // white-space: nowrap;
                            // text-overflow: ellipsis;
                        }
                    }

                    .operation {
                        width: 100%;
                        overflow: hidden;
                        margin-top: 16rpx;
                        align-items: flex-end;

                        .myPrice {
                            color: $uni-color-price;
                            font-size: 30rpx;
                            font-weight: bold;
                        }

                        .notClick {
                            background: #f2f2f2;
                            color: #d5d5d5;
                        }

                        .gmNub {
                            float: left;
                            height: 44upx;
                            border: 1upx solid #dddddd;
                            border-radius: 10upx;
                            width: 110upx;
                            margin: 0 10upx;
                            text-align: center;
                            color: #d5d5d5;
                            line-height: 44upx;
                            min-height: auto;
                            box-sizing: border-box;
                        }

                        .btns {
                            width: 44upx;
                            height: 44upx;
                            border: 1upx solid #dddddd;
                            border-radius: 10upx;
                            float: left;
                            text-align: center;
                            line-height: 36upx;
                            color: #333333;
                            font-size: 40upx;
                        }
                    }
                }
            }
        }

        .bottom-box {
            height: 100rpx;

            .bottomf {
                width: 100%;
                height: 100rpx;
                background: #ffffff;
                overflow: hidden;
                position: fixed;
                left: 0;
                bottom: calc(var(--bottom) + constant(safe-area-inset-bottom));
                bottom: calc(var(--bottom) + env(safe-area-inset-bottom));
                border-top: 1upx solid #efefef;
                z-index: 5;

                .leftPic {
                    overflow: hidden;
                    padding-left: $uni-page-space;

                    .qselect {
                        color: #666666;
                    }

                    .total {
                        color: #333333;
                        margin-left: 50upx;
                        font-size: 26rpx;

                        .cost {
                            color: $uni-color-price;
                            margin-right: 10upx;
                            font-weight: bold;
                            font-size: 32rpx;
                        }
                    }
                }

                .rightBtn {
                    width: 200upx;
                    height: 100upx;
                    color: #ffffff;
                    text-align: center;
                    line-height: 100upx;
                }
            }
        }
    }

    .bor {
        border: 1px solid #afafaf;
    }
</style>
